<template>
    <div>

        <div>
            <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div>
            <van-tabs sticky @click-tab="onClickTab" :active="active">
                <van-tab v-for="(item, index) in navArr" :title="item.title" :name="item.name" :key="index"></van-tab>
                <div v-for="(item, index) in arr" :key="index" @click="goOdertails(item.id, item.orderStatusText)"
                    class="car1">
                    <div class="order">
                        <span>订单编号：{{ item.orderSn }}</span>
                        <span class="right">{{ item.orderStatusText }}</span>
                    </div>
                    <hr />
                    <div v-for="(items, index) in item.goodsList" :key="index" class="car">
                        <van-card :num="items.number" :price="items.Price" :title="items.goodsName" :thumb="items.picUrl">
                        </van-card>
                    </div>
                    <div class="money"><span>实付：￥{{ item.actualPrice }}</span></div>
                </div>
            </van-tabs>
        </div>
        <div style="height: 30mm;"></div>
    </div>
</template>

<script>
import { ref } from "vue";
import { service } from "../api/config";
export default {
    data() {
        return {
            tagsShow: true,
            list: [],
            goodsList: [],
            name: 0,
            active: Number(this.$route.query.active)
        }
    },
    props: {
        showType: {
            type: Number,
            default: 0
        },
        res: {
            type: Array,
            default: () => ref([]),
        },
        page: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        },
    },
    setup(props) {
        const showType = ref(props.showType)
        const page = ref(props.page);
        const limit = ref(props.limit);
        // const active = ref(0);
        const navArr = [{
            title: '全部订单',
            name: 0
        },
        {
            title: '待付款',
            name: 1
        },
        {
            title: '待发货',
            name: 2
        },
        {
            title: '待收货',
            name: 3
        },
        {
            title: '待评价',
            name: 4
        },
        ];
        const arr = ref([0]);
        const onClickTab = (title) => {
            showType.value = title.name;
            page.value = 1;
            limit.value = 10;
            getdata();

        };
        const getdata = () => {
            //    console.log(showType.value);
            arr.value = []
            Promise.all([
                service.get("/wx/order/list", {
                    params: {
                        showType: showType.value,
                        page: page.value,
                        limit: limit.value,
                    }
                }),
            ]).then(responses => {
                props.res.value = responses[0].data.data.list;
                arr.value = responses[0].data.data.list;
            });
        }
        getdata();
        return {
            //  active,
            navArr,
            arr,
            page,
            limit,
            onClickTab,
            getdata
        };
    },

    methods: {
        onClickLeft() {
            this.$router.push("/My");
        },
        goOdertails(id, orderStatusText) {
            this.$router.push({
                path: '/Orderdetails',
                query: {
                    id: id,
                    orderStatusText: orderStatusText
                }
            })
        },
        createdMyOrders() {
            const title = this.navArr;
            console.log(this.arr);
            for (const item of title) {
                if (item.name == 0) {
                    this.arr.push(item)
                    break;
                } else {
                    console.log('zhangsan');
                }
            }
        },
        handleScroll() {
            // 当页面滚动到距离最底部50px以内时发送请求获取更多数据
            if (document.documentElement.scrollTop + document.documentElement.clientHeight + 50 >= document.documentElement.scrollHeight) {
                this.page++
                this.getdata();
            }
        },
        // tabs() {
        //     // console.log(this.$route.query.index);
        //     // this.name = this.$route.params.index;
        //     // console.log(this.name);
        //     
        // }

    },
    // created() {
    //     this.tabs();
    // },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)

    }

}
</script>


<style scoped>
.van-tabbar--fixed {
    position: relative;
    bottom: 0;
    left: 0;
}

.van-tag {
    display: flex;
    left: 100%;
}

.order {
    height: 30rem;
    line-height: 30px;
    /* align-items: center; */
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.right {
    margin-right: 10px;
    color: red;
}

.van-card {
    position: relative;
    box-sizing: border-box;
    padding: var(--van-card-padding);
    color: var(--van-card-text-color);
    font-size: var(--van-card-font-size);
    background: var(--van-card-background);
    margin-top: 15px;
}

.car1 {
    margin-top: 20px;
}

.money {
    margin-top: 15px;
}
</style>